import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Container,
  Typography,
  Button,
  Grid,
  Card,
  CardContent,
  CardActions,
  Box,
  TextField,
  Paper,
  Alert,
} from '@mui/material';
import SecurityIcon from '@mui/icons-material/Security';
import SpeedIcon from '@mui/icons-material/Speed';
import PublicIcon from '@mui/icons-material/Public';

function Home({ user, onLogin, error }) {
  const navigate = useNavigate();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const features = [
    {
      icon: <SecurityIcon sx={{ fontSize: 40 }} />,
      title: 'Privacy-Preserving',
      description: 'Prove your creditworthiness without revealing sensitive financial data using zero-knowledge proofs.',
    },
    {
      icon: <SpeedIcon sx={{ fontSize: 40 }} />,
      title: 'Fast & Efficient',
      description: 'Automated verification process reduces loan approval time from days to minutes.',
    },
    {
      icon: <PublicIcon sx={{ fontSize: 40 }} />,
      title: 'Global Access',
      description: 'Access lending services from anywhere in the world with cross-border compatibility.',
    },
  ];

  const handleLogin = async (e) => {
    e.preventDefault();
    await onLogin(username, password);
  };

  if (user) {
    return (
      <Container maxWidth="md">
        <Box sx={{ mt: 4, textAlign: 'center' }}>
          <Typography variant="h4" component="h1" gutterBottom>
            欢迎回来, {user.username}!
          </Typography>
          <Paper sx={{ p: 3, mt: 3 }}>
            <Typography variant="h6" gutterBottom>
              账户信息
            </Typography>
            <Typography>余额: {user.balance}</Typography>
            <Typography>信用分数: {user.creditScore}</Typography>
            <Typography>钱包地址: {user.walletAddress}</Typography>
          </Paper>
        </Box>
      </Container>
    );
  }

  return (
    <Container maxWidth="sm">
      <Box sx={{ mt: 8, textAlign: 'center' }}>
        <Typography variant="h4" component="h1" gutterBottom>
          FinZkTrust
        </Typography>
        <Typography variant="subtitle1" gutterBottom>
          基于零知识证明的隐私金融借贷系统
        </Typography>
        
        <Paper sx={{ p: 4, mt: 4 }}>
          <Typography variant="h6" gutterBottom>
            登录
          </Typography>
          {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
          <form onSubmit={handleLogin}>
            <TextField
              fullWidth
              label="用户名"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              margin="normal"
              required
            />
            <TextField
              fullWidth
              label="密码"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              margin="normal"
              required
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3 }}
            >
              登录
            </Button>
          </form>
        </Paper>
      </Box>
    </Container>
  );
}

export default Home; 